<template>
  <div class="real-time-statistics">
    <div class="dashboard-center__row">
      <statistics-container
        title="资金概况"
        :api="funSummaryApi"
        :to="{name: 'home'}"
        :type="type"
        :show-nav="true"
        :nav="capitalNavList"
        :more="false"
      ></statistics-container>
      <statistics-container
        title="会员概况"
        :api="memberSummaryApi"
        :to="{name: 'home'}"
        :type="type"
        :nav="memberNavList"
        :more="false"
      ></statistics-container>
    </div>
    <div class="dashboard-center__row commission-location-left">
      <div class="real-time-statistics__tab">
        <div class="real-time-statistics__btn" @click="showDivision = false" :class="showDivision === false? 'active':''">资金概况</div>
        <div class="real-time-statistics__btn" @click="showDivision = true" :class="showDivision? 'active':''">上分概况</div>
      </div>
      <statistics-container
        title="上分概况"
        :api="upAmountSummaryApi"
        :to="{name: 'home'}"
        :type="type"
        :show-nav="true"
        :nav="divisionNavList"
        :more="false"
        v-if="showDivision"
      ></statistics-container>
    </div>
    <div class="dashboard-center__row commission-location-right">
      <div class="real-time-statistics__tab">
        <div class="real-time-statistics__btn" @click="showRegister = false" :class="showRegister === false? 'active':''">会员概况</div>
        <div class="real-time-statistics__btn" @click="showRegister = true" :class="showRegister? 'active':''">新注册概况</div>
        <div class="real-time-statistics-tip">
          <el-popover
              placement="bottom"
              width="380"
              :offset="100"
              trigger="click">
            <div class="real-time-statistics-tip__tip">
              <div class="real-time-statistics-tip__tip-content">
                <div v-if="!showRegister">累计会员数：累计到本日/上日的会员总人数</div>
                <div v-else>新会员数：本日/上日的新注册会员总人数</div>
                <div>活跃会员数：活跃会员定义为“充值/提现/投注/参与活动”达到其中一个条件即为活跃会员</div>
                <div>待活跃会员数：待活跃会员定义为“充值/提现/投注/参与活动”没有这4个条件即为待活跃会员</div>
                <div>有效会员数：满足日有效投注金额和日有效投注单数的会员</div>
                <div>登录会员数：登录过的会员</div>
              </div>
            </div>
            <div class="real-time-statistics-tip__tip-icon" slot="reference">?</div>
          </el-popover>
        </div>
      </div>
      <statistics-container
        title="新注册概况"
        :api="memberSummaryApi"
        :to="{name: 'home'}"
        :type="type"
        :isNewReg="isNewReg"
        :nav="registerNavList"
        :more="false"
        v-if="showRegister"
      ></statistics-container>
    </div>
    <div class="dashboard-center__title">
      游戏数据汇总
      <custom-button-group v-model="day" class="float-right">
        <custom-button :label="3">
          今日
        </custom-button>
        <custom-button :label="4">
          昨日
        </custom-button>
      </custom-button-group>
    </div>
    <div class="dashboard-center__row dashboard-center__row--win-lose">
      <win-lose :type="day"></win-lose>
    </div>
    <div class="dashboard-center__row">
      <win-lose-and-effect-betting
        :type="type"
      ></win-lose-and-effect-betting>
    </div>
  </div>
</template>

<script>
  import StatisticsContainer from "../components/statistics-container";
  import WinLose from "../components/win-lose";
  import WinLoseAndEffectBetting from "../components/win-lose-and-effect-betting";

  import {
    funSummaryApi,
    upAmountSummaryApi,
    memberSummaryApi,
    upAmountByTimeApi,
    upAmountUserByTimeApi,
    rechargeByTimeApi,
    rechargeUserByTimeApi,
    withdrawByTimeApi,
    withdrawUserByTimeApi,
    bettingAmountByTimeApi,
    totalUserByTimeApi,
    newUserByTimeApi,
    actUserByTimeApi,
    notActUserByTimeApi,
    effectUserByTimeApi,
    loginUserByTimeApi,
  } from '@/services/api/home';

  export default {
    name: "real-statistics",

    components: {
      StatisticsContainer,
      WinLose,
      WinLoseAndEffectBetting,
    },

    data() {
      return {
        funSummaryApi,
        upAmountSummaryApi,
        memberSummaryApi,

        day: 3,
        type: 1,
        isNewReg:1,
        capitalNavList: [
          {
            title: "总存款额",
            prop: 'rechargeSumMoney',
            filter: 'currency',
            api: rechargeByTimeApi,
          },
          {
            title: "存款人数",
            prop: 'rechargeUniqueUser',
            api: rechargeUserByTimeApi,
          },
          {
            title: "总提款额",
            prop: 'withdrawSumMoney',
            filter: 'currency',
            api: withdrawByTimeApi,
          },
          {
            title: "提款人数",
            prop: 'withdrawUniqueUser',
            api: withdrawUserByTimeApi,
          },
          {
            title: "总投注额",
            prop: 'bettingSumMoney',
            filter: 'currency',
            api: bettingAmountByTimeApi,
          }
        ],
        divisionNavList: [
          {
            title: "总上分额",
            prop: 'upAmountSumMoney',
            // filter: 'currency',
            api: upAmountByTimeApi,
          },
          {
            title: "上分人数",
            prop: 'upAmountUniqueUser',
            api: upAmountUserByTimeApi,
          },
        ],
        memberNavList: [
          {
            title: "累计会员数",
            prop: 'totalUser',
            api: totalUserByTimeApi,
          },
          // {
          //   title: "新会员数",
          //   prop: 'newUserCnt',
          //   api: newUserByTimeApi,
          // },
          {
            title: "活跃会员数",
            prop: 'activeUserCnt',
            api: actUserByTimeApi,
          },
          {
            title: "待活跃会员数",
            prop: 'notActiveUser',
            api: notActUserByTimeApi,
          },
          {
            title: "有效会员数",
            prop: 'effectUserCnt',
            api: effectUserByTimeApi,
          },
          {
            title: "登录会员数",
            prop: 'loginUserCnt',
            api: loginUserByTimeApi,
          }
        ],
        registerNavList: [
          {
            title: "新会员数",
            prop: 'newUserCnt',
            api: newUserByTimeApi,
            isNewReg: 1,
          },
          {
            title: "活跃会员数",
            prop: 'activeUserCnt',
            api: actUserByTimeApi,
            isNewReg: 1,
          },
          {
            title: "待活跃会员数",
            prop: 'notActiveUser',
            api: notActUserByTimeApi,
            isNewReg: 1,
          },
          {
            title: "有效会员数",
            prop: 'effectUserCnt',
            api: effectUserByTimeApi,
            isNewReg: 1,
          },
          {
            title: "登录会员数",
            prop: 'loginUserCnt',
            api: loginUserByTimeApi,
            isNewReg: 1,
          }
        ],
        showDivision: false,
        showRegister: false,
      };
    },
  }
</script>

<style lang="scss" scoped>
  @include b(real-time-statistics) {
    width: 100%;
    height: auto;
    padding: 0 45px;
    position: relative;
    .commission-location-left {
      background: #ffffff;
      position: absolute;
      top: 0;
      width: 600px;
      @include e(tab) {
        flex: 1 0 0;
        font-size:24px;
        font-weight: bold;
        margin-bottom: 15px;

        position: absolute;
        background: #ffffff;
        @include e(btn) {
          float: left;
          cursor: pointer;
          color: $--color-info;
          &:first-child {
            padding-right: 20px;
            border-right: 3px solid $--color-primary;
          }
          &:nth-child(2) {
            padding-left: 20px;
          }
          &:active {
            color: $--color-black;
          }
        }
        .active {
          color: $--color-black;
        }
        @include b(real-time-statistics-tip){
          display: inline-block;
          margin-left: 15px;
          @include e(tip-icon) {
            width: 24px;
            height: 24px;
            background: rgba(243, 243, 243, 1);
            color: $--color-black-4;
            font-size: $--font-size-x-large;
            border-radius: $--border-radius-circle;
            text-align: center;
            line-height: 24px;
            display: inline-block;
            cursor: pointer;
            vertical-align: top;
            margin-top: 4px;
          }
          @include e(tip) {
            padding: 10px 8px;
            box-sizing: border-box;
          }
          @include e(tip-title) {
            font-size: $--font-size-small;
            font-weight: bold;
            margin-bottom: 4px;
          }
          @include e(tip-content) {
            font-size: $--font-size-small;
            line-height: 22px;
            margin-bottom: 12px;

            &:last-of-type {
              margin-bottom: 0;
            }
          }
        }
      }
      @include b(statistics-container) {
        width: 600px !important;
        flex: 0 0 100% !important;
      }
    }
    .commission-location-right {
      background: #ffffff;
      position: absolute;
      top: 0;
      width: 600px;
      right: 25px;
      @include e(tab) {
        flex: 1 0 0;
        font-size:24px;
        font-weight: bold;
        margin-bottom: 15px;

        position: absolute;
        background: #ffffff;
        @include e(btn) {
          float: left;
          cursor: pointer;
          color: $--color-info;
          &:first-child {
            padding-right: 20px;
            border-right: 3px solid $--color-primary;
          }
          &:last-child {
            padding-left: 20px;
          }
          &:active {
            color: $--color-black;
          }
        }
        .active {
          color: $--color-black;
        }
      }
      @include b(statistics-container) {
        width: 600px !important;
        flex: 0 0 100% !important;
      }
    }
  }
</style>

